<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 为了游览器检索增加结构化数据（JSON-LD）-->
  <!-- SEO: Structured Data for Google Rich Results -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "CarbonTrack",
    "url": "https://carbontrackapp.com"
  }
  </script>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SiteNavigationElement",
    "name": [
      "About",
      "Partners & Collaborators",
    ],
    "url": [
      "https://carbontrackapp.com/about",
      "https://carbontrackapp.com/partners",
    ]
  }
  </script>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "CarbonTrack校园碳账户",
    "url": "https://carbontrackapp.com",
    "logo": "https://carbontrackapp.com/img/team.png",
    "description": "CarbonTrack is a carbon accounting platform designed for schools that helps students record, quantify, and incentivize environmentally friendly actions, promoting a green lifestyle.",
    "sameAs": [
      "https://www.instagram.com/carbontrackorg",
      "https://www.linkedin.com/company/carbontrackorg"
    ]
  }
  </script>



  <title>CarbonTrack校园碳账户</title>
  <link rel="icon" href="/img/team.jpg" type="image/JPG">
  <!-- 引入Bootstrap和jQuery的CDN链接 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/utils.js"></script>
  <script src="js/nav.js"></script>

  <link rel="stylesheet" href="./css/index.css">
  <!-- SF Pro font -->
  <link href="https://fonts.cdnfonts.com/css/sf-pro-display" rel="stylesheet">
  <!-- Intersection Observer polyfill for older browsers - 使用jsDelivr替代polyfill.io -->
  <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.js"></script>
  <style>
    :root {
      /* iOS System Colors */
      --ios-red: #FF3B30;
      --ios-orange: #FF9500;
      --ios-yellow: #FFCC00;
      --ios-green: #34C759;
      --ios-mint: #00C7BE;
      --ios-teal: #30B0C7;
      --ios-cyan: #32ADE6;
      --ios-blue: #007AFF;
      --ios-indigo: #5856D6;
      --ios-purple: #AF52DE;
      --ios-pink: #FF2D55;
      --ios-brown: #A2845E;
      
      /* iOS Gray Colors */
      --ios-gray: #8E8E93;
      --ios-gray2: #AEAEB2;
      --ios-gray3: #C7C7CC;
      --ios-gray4: #D1D1D6;
      --ios-gray5: #E5E5EA;
      --ios-gray6: #F2F2F7;
      
      /* iOS Dynamic Background Colors - Light Mode */
      --ios-system-background: #FFFFFF;
      --ios-secondary-background: #F2F2F7;
      --ios-tertiary-background: #FFFFFF;
      
      /* Text Colors - Light Mode */
      --text-color: #000000;
      --text-secondary-color: #3A3A3C;
      --text-tertiary-color: #48484A;
      --text-muted-color: #8E8E93;
      
      /* Card and Container Colors - Light Mode */
      --card-background: rgba(255, 255, 255, 0.8);
      --container-background: #FFFFFF;
      --border-color: rgba(0, 0, 0, 0.1);
      
      /* Content width */
      --content-max-width: 1280px;
      
      /* Animation Durations */
      --animation-duration-fast: 0.3s;
      --animation-duration-medium: 0.5s;
      --animation-duration-slow: 0.8s;
      
      /* Animation Timing Functions */
      --animation-timing-default: cubic-bezier(0.42, 0, 0.58, 1);
      --animation-timing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
      --animation-timing-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    /* Dark Mode Colors - System Preference */
    @media (prefers-color-scheme: dark) {
      body.auto-theme {
        /* 更深的背景色 */
        --ios-system-background: #000000;
        --ios-secondary-background: #111111;
        --ios-tertiary-background: #1C1C1E;
        
        /* 增强对比度的文本颜色 */
        --text-color: #FFFFFF;
        --text-secondary-color: #F2F2F7;
        --text-tertiary-color: #E5E5EA;
        --text-muted-color: #AEAEB2;
        
        /* 更深的卡片背景，减少透明度 */
        --card-background: rgba(28, 28, 30, 0.95);
        --container-background: #1C1C1E;
        --border-color: rgba(255, 255, 255, 0.15);
        
        /* 卡片特殊颜色 */
        --card-dark-bg: #1C1C1E;      /* 深灰卡片背景 */
        --card-blue-bg: #0A3A6D;      /* 蓝色卡片背景 */
        --card-purple-bg: #4B2D83;    /* 紫色卡片背景 */
        
        /* iOS深色模式颜色 */
        --ios-red: #FF453A;
        --ios-orange: #FF9F0A;
        --ios-yellow: #FFD60A;
        --ios-green: #30D158;
        --ios-mint: #63E6E2;
        --ios-teal: #40C8E0;
        --ios-cyan: #64D2FF;
        --ios-blue: #0A84FF;
        --ios-indigo: #5E5CE6;
        --ios-purple: #BF5AF2;
        --ios-pink: #FF2D55;
        --ios-brown: #AC8E68;
      }
    }
    
    /* Base styles with transitions for theme changes */
    body {
      font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      color: var(--text-color);
      background-color: var(--ios-system-background);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* Add 'auto-theme' class to body for system theme detection */
    body.auto-theme {
      background-color: var(--ios-system-background);
      color: var(--text-color);
    }
    
    /* Apply dark mode styles to key elements */
    body.auto-theme.dark-mode {
      background-color: var(--ios-system-background);
      color: var(--text-color);
    }
    
    /* Card and container styles */
    .card, .content-container, .hero-section {
      background-color: var(--card-background);
      color: var(--text-color);
      transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* Navigation styles */
    .navbar {
      background-color: var(--ios-system-background);
      border-bottom: 1px solid var(--border-color);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Text colors */
    h1, h2, h3, h4, h5, h6, p {
      color: var(--text-color);
      transition: color 0.3s ease;
    }
    
    .text-muted, .text-secondary {
      color: var(--text-muted-color) !important;
      transition: color 0.3s ease;
    }
    
    /* Input and form styles */
    .form-control, input, select, textarea {
      background-color: var(--ios-secondary-background);
      color: var(--text-color);
      border-color: var(--border-color);
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Modal styles */
    .modal-content {
      background-color: var(--ios-tertiary-background);
      color: var(--text-color);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .modal-header, .modal-footer {
      border-color: var(--border-color);
      transition: border-color 0.3s ease;
    }
    
    /* iOS-style animations */
    .fade-in {
      opacity: 0;
      transition: opacity var(--animation-duration-medium) var(--animation-timing-apple);
    }
    
    .fade-in.visible {
      opacity: 1;
    }
    
    .slide-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity var(--animation-duration-medium) var(--animation-timing-apple),
                  transform var(--animation-duration-medium) var(--animation-timing-apple);
    }
    
    .slide-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .scale-in {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity var(--animation-duration-medium) var(--animation-timing-apple),
                  transform var(--animation-duration-medium) var(--animation-timing-apple);
    }
    
    .scale-in.visible {
      opacity: 1;
      transform: scale(1);
    }
    
    .stagger-item {
      opacity: 0;
      transform: translateY(20px);
    }
    
    .stagger-item.visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity var(--animation-duration-medium) var(--animation-timing-apple),
                  transform var(--animation-duration-medium) var(--animation-timing-apple);
    }
    
    /* Parallax effect */
    .parallax-container {
      overflow: hidden;
      position: relative;
    }
    
    .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background-position: center;
      background-size: cover;
      transform: translateZ(0);
      will-change: transform;
    }
    
    /* Sticky header effect */
    .sticky-element {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 10;
      transition: background-color var(--animation-duration-fast) var(--animation-timing-apple);
    }
    
    /* Hero caption animation */
    .hero-caption-animate {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
      transition: opacity 1s var(--animation-timing-apple),
                  transform 1s var(--animation-timing-apple);
      will-change: opacity, transform;
    }
    
    .hero-caption-animate.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    
    /* Apple-style section reveal */
    .section-reveal {
      position: relative;
      overflow: hidden;
    }
    
    .section-reveal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--ios-system-background);
      transform: translateY(0);
      transition: transform var(--animation-duration-medium) var(--animation-timing-apple);
      z-index: 1;
    }
    
    .section-reveal.visible::before {
      transform: translateY(-100%);
    }
    
    .section-reveal > * {
      position: relative;
      z-index: 2;
    }
    
    /* Carousel caption animation */
    @keyframes carouselCaptionIn {
      0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    .carousel-caption-animate {
      animation: carouselCaptionIn 0.8s var(--animation-timing-apple) forwards;
    }
    
    /* iOS-style hover transitions for interactive elements */
    .ios-hover-effect {
      transition: transform var(--animation-duration-fast) var(--animation-timing-apple),
                  box-shadow var(--animation-duration-fast) var(--animation-timing-apple);
    }
    
    .ios-hover-effect:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    /* Custom delay classes */
    .delay-100 { transition-delay: 0.1s; }
    .delay-200 { transition-delay: 0.2s; }
    .delay-300 { transition-delay: 0.3s; }
    .delay-400 { transition-delay: 0.4s; }
    .delay-500 { transition-delay: 0.5s; }
    
    /* Apply transitioning to announcement items */
    .announcement-item {
      transition: transform var(--animation-duration-medium) var(--animation-timing-apple),
                  opacity var(--animation-duration-medium) var(--animation-timing-apple);
    }
    
    /* Feature card hover animation */
    .feature-card {
      transition: transform 0.4s var(--animation-timing-apple),
                  box-shadow 0.4s var(--animation-timing-apple);
    }
    
    * {
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    body, html {
      padding: 0;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #000000;
      background-color: var(--ios-secondary-background);
      line-height: 1.5;
      scroll-behavior: smooth;
      font-size: 16px;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 600;
      margin-top: 0;
      color: #000;
    }
    
    p {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    
    a {
      color: var(--ios-blue);
      text-decoration: none;
      transition: opacity 0.2s;
    }
    
    a:hover {
      opacity: 0.8;
      text-decoration: none;
    }
    
    .container {
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: 0 24px;
    }
    
    .section {
      padding: 60px 0;
    }
    
    .section-heading {
      font-size: 2rem;
      text-align: center;
      margin-bottom: 2.5rem;
      letter-spacing: -0.01em;
    }
    
    /* Hero Section */
    .hero-section {
      position: relative;
    }
    
    .carousel {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }
    
    .carousel-inner {
      max-height: 560px; 
    }
    
    .carousel-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.95);
    }
    
    .carousel-caption {
      position: absolute;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 24px 32px;
      max-width: 600px;
      color: #000;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }
    
    .carousel-caption h2 {
      font-weight: 700;
      font-size: 2.2rem;
      margin-bottom: 8px;
    }
    
    .carousel-caption p {
      font-size: 1.1rem;
      margin-bottom: 0;
      color: var(--ios-gray);
      font-weight: 500;
    }
    
    .carousel-indicators {
      bottom: 30px;
    }
    
    .carousel-indicators li {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 0 6px;
      background-color: rgba(255, 255, 255, 0.5);
      transition: all 0.3s;
    }
    
    .carousel-indicators .active {
      width: 10px;
      height: 10px;
      background-color: white;
    }
    
    .carousel-control-prev, .carousel-control-next {
      width: 50px;
      height: 50px;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 50%;
      opacity: 0.8;
      margin: 0 32px;
    }
    
    /* Announcement Section */
    .announcement-section {
      margin-top: -40px;
      position: relative;
      z-index: 10;
    }
    
    .announcement-card {
      background-color: var(--ios-system-background);
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      padding: 32px;
    }
    
    .announcement-heading {
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 24px;
      font-weight: 700;
    }
    
    .announcement-subheading {
      color: var(--ios-blue);
      font-weight: 600;
      font-size: 1.1rem;
      margin-bottom: 16px;
    }
    
    .announcement-divider {
      height: 1px;
      background-color: var(--ios-gray5);
      margin: 16px 0 24px;
      width: 100%;
    }
    
    .announcement-list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    .announcement-item {
      display: flex;
      align-items: flex-start;
      padding: 16px 0;
      border-bottom: 1px solid var(--ios-gray5);
    }
    
    .announcement-item:last-child {
      border-bottom: none;
    }
    
    .announcement-icon {
      font-size: 24px;
      margin-right: 16px;
      min-width: 32px;
      text-align: center;
    }
    
    .announcement-content {
      flex: 1;
    }
    
    .announcement-content p {
      margin: 0;
    }
    
    .announcement-footer {
      font-size: 0.95rem;
      color: var(--ios-gray);
      margin-top: 24px;
      text-align: center;
    }
    
    /* Feature Cards Section */
    .feature-section {
      padding: 80px 0;
      position: relative;
      background: linear-gradient(180deg, 
        rgba(242, 242, 247, 1) 0%,
        rgba(250, 250, 255, 0.8) 100%);
      overflow: hidden;
    }
    
    .feature-section::before {
      content: '';
      position: absolute;
      top: -200px;
      right: -200px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.1) 0%, rgba(0, 122, 255, 0) 70%);
      z-index: 0;
    }
    
    .feature-section::after {
      content: '';
      position: absolute;
      bottom: -200px;
      left: -200px;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(88, 86, 214, 0.1) 0%, rgba(88, 86, 214, 0) 70%);
      z-index: 0;
    }
    
    .section-heading {
      font-weight: 700;
      background: linear-gradient(120deg, var(--ios-blue), var(--ios-indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: inline-block;
      margin: 0 auto 3rem;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 32px;
      margin-top: 48px;
    }
    
    .feature-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
      transition: transform 0.4s var(--animation-timing-apple),
                  box-shadow 0.4s var(--animation-timing-apple);
      position: relative;
      z-index: 1;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }
    
    .feature-card--blue {
      background: linear-gradient(135deg, var(--ios-blue), #0054d1);
      position: relative;
    }
    
    .feature-card--blue::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('');
      opacity: 0.1;
      z-index: 0;
    }
    
    .feature-card--white {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .feature-card--purple {
      background: linear-gradient(135deg, var(--ios-indigo), var(--ios-purple));
      position: relative;
    }
    
    .feature-card--purple::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('');
      opacity: 0.1;
      z-index: 0;
    }
    
    .feature-card__body {
      padding: 32px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    .feature-card__title {
      position: relative;
      display: inline-block;
      margin-bottom: 1.25rem;
      font-weight: 700;
    }
    
    .feature-card--white .feature-card__title {
      background: linear-gradient(120deg, var(--ios-blue), var(--ios-indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .feature-card--white .feature-card__text {
      color: #333;
    }
    
    .feature-card__text {
      flex: 1;
      margin-bottom: 24px;
      color: inherit;
      opacity: 0.95;
    }
    
    .feature-card__list {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    .feature-card__list-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .feature-card__list-item:last-child {
      margin-bottom: 0;
    }
    
    .feature-card__list-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .feature-card--white .feature-card__list-icon {
      background-color: rgba(0, 122, 255, 0.1);
    }
    
    .feature-card__button {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 12px 24px;
      font-weight: 600;
      color: white;
      transition: all 0.3s var(--animation-timing-apple);
    }
    
    .feature-card__button:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      color: white;
      text-decoration: none;
    }
    
    /* Floating Button */
    .floating-button {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 100;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: var(--ios-green);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(52, 199, 89, 0.3);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .floating-button:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 8px 25px rgba(52, 199, 89, 0.4);
    }
    
    .floating-button:active {
      transform: translateY(0) scale(0.98);
    }
    
    .floating-button i {
      font-size: 24px;
    }
    
    /* Modal Styling */
    .modal-dialog {
      margin-top: 50px;
    }
    
    .modal-content {
      border-radius: 20px;
      border: none;
      overflow: hidden;
      box-shadow: 0 12px 50px rgba(0, 0, 0, 0.2);
    }
    
    .modal-header, 
    .modal-footer {
      border: none;
      padding: 20px 24px;
    }
    
    .modal-body {
      padding: 24px;
    }
    
    .modal-title {
      font-weight: 700;
      font-size: 1.5rem;
    }
    
    .modal-footer {
      justify-content: center;
      padding-top: 0;
    }
    
    .form-group {
      margin-bottom: 24px;
    }
    
    .form-group label {
      font-weight: 500;
      color: var(--ios-gray);
      margin-bottom: 8px;
      display: block;
    }
    
    .form-control {
      border-radius: 12px;
      border: 1px solid var(--ios-gray4);
      padding: 12px 16px;
      height: auto;
      font-size: 1rem;
      background-color: var(--ios-secondary-background);
      transition: all 0.2s;
    }
    
    .form-control:focus {
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
      border-color: var(--ios-blue);
    }
    
    .btn {
      border-radius: 12px;
      padding: 12px 24px;
      border: none;
      font-weight: 600;
      transition: all 0.2s;
    }
    
    .btn-block {
      width: 100%;
      display: block;
    }
    
    .btn-primary {
      background-color: var(--ios-blue);
    }
    
    .btn-primary:hover {
      background-color: #0071EB;
      transform: translateY(-1px);
    }
    
    .btn-success {
      background-color: var(--ios-green);
    }
    
    .btn-success:hover {
      background-color: #2DB84D;
      transform: translateY(-1px);
    }
    
    .btn-secondary {
      background-color: var(--ios-gray4);
      color: #000;
    }
    
    .btn-secondary:hover {
      background-color: var(--ios-gray3);
      color: #000;
    }
    
    .btn-outline-primary {
      background-color: transparent;
      border: 1px solid var(--ios-blue);
      color: var(--ios-blue);
    }
    
    .btn-outline-primary:hover {
      background-color: rgba(0, 122, 255, 0.05);
    }
    
    /* Message Modal */
    .conversation-list {
      border-right: 1px solid var(--ios-gray5);
      height: 450px;
      overflow-y: auto;
    }
    
    .message-list {
      height: 400px;
      overflow-y: auto;
      padding: 20px;
      background-color: var(--ios-gray6);
      border-radius: 16px;
    }
    
    .message-input {
      display: flex;
      margin-top: 16px;
    }
    
    .message-input-field {
      flex: 1;
      border-radius: 24px;
      padding: 12px 20px;
      border: 1px solid var(--ios-gray4);
      background-color: var(--ios-secondary-background);
    }
    
    .message-input-button {
      margin-left: 8px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--ios-blue);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
    }
    
    /* Responsive styles */
    @media (max-width: 992px) {
      .section-heading {
        font-size: 1.8rem;
      }
      
      .carousel-inner {
        max-height: 450px;
      }
      
      .carousel-caption {
        max-width: 500px;
        bottom: 70px;
        padding: 20px 28px;
      }
      
      .carousel-caption h2 {
        font-size: 1.8rem;
      }
      
      .feature-card__body {
        padding: 24px;
      }
    }
    
    /* Mobile Navigation Optimizations */
    .navbar {
      transition: all 0.3s ease;
    }
    
    .navbar-scroll {
      position: fixed;
      top: 0;
      width: 100%;
      transition: transform 0.3s ease, background-color 0.3s ease;
      z-index: 1000;
    }
    
    .navbar-scroll-hidden {
      transform: translateY(-100%);
    }
    
    /* Fix mobile navbar layout */
    .navbar .message-icon-container {
      margin-right: 8px;
    }
    
    .navbar .message-icon-container i {
      vertical-align: middle;
    }
    
    .navbar-nav .nav-link {
      transition: color 0.2s;
    }
    
    .navbar-brand {
      display: flex;
      align-items: center;
    }
    
    .navbar-toggler {
      border: none;
      outline: none !important;
    }
    
    /* Auth buttons container */
    .auth-buttons .btn {
      transition: background-color 0.2s, transform 0.1s;
    }
    
    .auth-buttons .btn:active {
      transform: scale(0.96);
    }
    
    @media (max-width: 768px) {
      .navbar {
        padding: 8px 12px !important; /* Increase vertical padding slightly */
        background-color: rgba(0, 42, 92, 0.95) !important; /* More transparent */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      
      /* Improved tap targets for mobile */
      .navbar .nav-link {
        padding: 10px 16px;
      }
      
      .navbar-toggler {
        padding: 4px 8px;
        font-size: 1rem;
      }
      
      .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
      }
      
      .section {
        padding: 40px 0;
      }
      
      .section-heading {
        font-size: 1.6rem;
        margin-bottom: 2rem;
      }
      
      .feature-grid {
        gap: 24px;
      }
      
      .carousel-inner {
        max-height: 350px;
      }
      
      .carousel-caption {
        bottom: 50px;
        max-width: 90%;
        padding: 16px 24px;
      }
      
      .carousel-caption h2 {
        font-size: 1.5rem;
      }
      
      .carousel-caption p {
        font-size: 1rem;
      }
      
      .announcement-card {
        padding: 24px;
      }
      
      .announcement-section {
        margin-top: -30px;
      }
      
      .floating-button {
        width: 54px;
        height: 54px;
        bottom: 24px;
        right: 24px;
      }
    }
    
    @media (max-width: 576px) {
      .container {
        padding: 0 20px;
      }
      
      /* Simplified mobile header */
      .navbar .navbar-text {
        display: none !important; /* Hide secondary text */
      }
      
      .navbar-title-chinese {
        font-size: 1.1rem !important;
      }
      
      .navbar-brand {
        font-size: 1.1rem;
      }
      
      .navbar-brand img {
        width: 28px;
        height: 28px;
        margin-right: 6px;
      }
      
      .section {
        padding: 32px 0;
      }
      
      .section-heading {
        font-size: 1.4rem;
      }
      
      .carousel-inner {
        max-height: 250px;
      }
      
      .carousel-caption {
        bottom: 30px;
        padding: 12px 20px;
      }
      
      .carousel-caption h2 {
        font-size: 1.3rem;
      }
      
      .carousel-caption p {
        font-size: 0.9rem;
      }
      
      .announcement-heading {
        font-size: 1.3rem;
      }
      
      .announcement-card {
        padding: 20px;
      }
      
      .feature-card__body {
        padding: 20px;
      }
      
      .feature-card__title {
        font-size: 1.3rem;
      }
      
      .floating-button {
        width: 48px;
        height: 48px;
      bottom: 20px;
      right: 20px;
      }
      
      .floating-button i {
        font-size: 20px;
      }
    }
    
    /* iOS Button Styles */
    .btn-ios-primary {
      background-color: var(--ios-blue);
      color: white;
      border: none;
      transition: all 0.2s;
    }
    
    .btn-ios-primary:hover, 
    .btn-ios-primary:focus {
      background-color: #0071EB;
      color: white;
      transform: translateY(-1px);
    }
    
    .btn-ios-secondary {
      background-color: transparent;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.8);
      transition: all 0.2s;
    }
    
    .btn-ios-secondary:hover, 
    .btn-ios-secondary:focus {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }
    
    /* Ensure mobile navbar consistency */
    .navbar {
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      position: absolute;
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    /* Fix for white bar in mobile navbar */
    @media (max-width: 768px) {
      body {
        padding-top: 0 !important; /* Override any inline styles */
      }
      
      .navbar {
        background-color: rgba(0, 42, 92, 0.98) !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
      }
      
      .navbar-scroll {
        position: fixed;
      }
      
      /* Ensure contrast between buttons */
      .btn-primary {
        background-color: var(--ios-blue);
      }
      
      .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.8);
      }
    }
    
    /* Carousel image animation */
    .carousel-item .parallax-bg {
      opacity: 0;
      transition: opacity 1s var(--animation-timing-apple);
      will-change: opacity, transform;
    }
    
    .carousel-item.active .parallax-bg {
      opacity: 1;
    }
    
    /* Hero caption animation - update timing */
    .hero-caption-animate {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
      transition: opacity 1s var(--animation-timing-apple),
                  transform 1s var(--animation-timing-apple);
      will-change: opacity, transform;
    }
    
    .hero-caption-animate.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    
    /* Add animation direction support */
    .animate-on-scroll {
      transition-property: opacity, transform;
      transition-duration: var(--animation-duration-medium);
      transition-timing-function: var(--animation-timing-apple);
      will-change: opacity, transform;
    }
    
    .animate-on-scroll.fade-in:not(.visible) {
      opacity: 0;
    }
    
    .animate-on-scroll.slide-up:not(.visible) {
      opacity: 0;
      transform: translateY(30px);
    }
    
    .animate-on-scroll.slide-down:not(.visible) {
      opacity: 0;
      transform: translateY(-30px);
    }
    
    .animate-on-scroll.scale-in:not(.visible) {
      opacity: 0;
      transform: scale(0.95);
    }
    
    /* Reset transitions when animation is complete */
    .animation-complete {
      transition: none !important;
    }
    
    /* Add frosted glass effect styles */
    .frosted-glass {
      background-color: rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 23, 84, 0.08);
    }

    .announcement-card {
      overflow: hidden;
      position: relative;
      z-index: 5;
      padding: 32px;
      transition: transform 0.6s var(--animation-timing-apple),
                  box-shadow 0.6s var(--animation-timing-apple);
    }

    .announcement-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
      z-index: -1;
      border-radius: 24px;
    }

    .announcement-card::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      right: -50%;
      bottom: -50%;
      background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
      opacity: 0;
      z-index: -2;
      transform: scale(0.5);
      transition: opacity 1.5s var(--animation-timing-apple),
                  transform 1.5s var(--animation-timing-apple);
    }

    .announcement-card.visible::after {
      opacity: 0.2;
      transform: scale(1);
    }

    .announcement-heading {
      font-size: 2rem;
      font-weight: 700;
      background: linear-gradient(120deg, var(--ios-blue), var(--ios-indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 20px;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.6s var(--animation-timing-apple),
                  opacity 0.6s var(--animation-timing-apple);
    }

    .announcement-card.visible .announcement-heading {
      transform: translateY(0);
      opacity: 1;
    }

    .announcement-icon-glow {
      position: relative;
    }

    .announcement-icon-glow::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(0);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
      z-index: -1;
      transition: transform 0.4s var(--animation-timing-bounce);
    }

    .announcement-item:hover .announcement-icon-glow::after {
      transform: translate(-50%, -50%) scale(1.5);
    }

    .announcement-item {
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 16px;
      margin-bottom: 16px;
      padding: 16px;
      transform: translateX(-20px);
      opacity: 0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.6);
      overflow: hidden;
      transition: transform 0.6s var(--animation-timing-apple),
                  opacity 0.6s var(--animation-timing-apple),
                  box-shadow 0.3s var(--animation-timing-apple),
                  background-color 0.3s var(--animation-timing-apple);
    }

    .announcement-item:hover {
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      transform: translateX(0) scale(1.02);
    }

    .announcement-item.visible {
      transform: translateX(0);
      opacity: 1;
    }

    .announcement-content p {
      position: relative;
      z-index: 2;
    }

    .announcement-footer {
      text-align: center;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--ios-gray);
      padding-top: 24px;
      margin-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.8s var(--animation-timing-apple),
                  opacity 0.8s var(--animation-timing-apple);
    }

    .announcement-card.visible .announcement-footer {
      transform: translateY(0);
      opacity: 1;
    }

    /* Add iOS system animation styles */
    .ios-depth-effect {
      position: relative;
      z-index: 1;
    }

    .ios-depth-effect::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(255, 255, 255, 0) 100%);
      border-radius: inherit;
      z-index: -1;
    }

    /* iOS Card Shine Effect */
    .ios-shine-effect {
      position: relative;
      overflow: hidden;
    }

    .ios-shine-effect::after {
      content: '';
      position: absolute;
      top: -100%;
      left: -100%;
      right: -100%;
      bottom: -100%;
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%,
        transparent 100%
      );
      transform: rotate(45deg) translate(-100%, 0);
      animation: shineEffect 6s infinite ease-out;
      z-index: 1;
      pointer-events: none;
    }

    @keyframes shineEffect {
      0% {
        transform: rotate(45deg) translate(-100%, -100%);
      }
      25%, 100% {
        transform: rotate(45deg) translate(100%, 100%);
      }
    }

    /* Subtle Floating Animation */
    .ios-float {
      animation: floatAnimation 6s infinite ease-in-out;
    }

    @keyframes floatAnimation {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    /* Interactive ripple effect */
    .ripple-effect {
      position: relative;
      overflow: hidden;
    }

    .ripple-effect::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1);
      transition: opacity 1s, transform 1s;
    }

    .ripple-effect:active::after {
      opacity: 0.3;
      transform: scale(100);
      transition: transform 0.5s ease-out;
    }

    /* Enhanced announcement background */
    .announcement-section {
      position: relative;
      margin-top: -40px;
      padding-bottom: 40px;
    }

    .announcement-section::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, 
        rgba(242, 242, 247, 0) 0%,
        rgba(242, 242, 247, 0.8) 20%,
        rgba(242, 242, 247, 1) 100%);
      z-index: -1;
    }

    /* Enhanced announcement items */
    .announcement-item {
      position: relative;
      overflow: hidden;
      transform-origin: left center;
    }

    .announcement-item:hover .announcement-icon {
      transform: scale(1.2);
      transition: transform 0.3s var(--animation-timing-bounce);
    }

    .announcement-icon {
      transition: transform 0.3s var(--animation-timing-apple);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      font-size: 24px;
      border-radius: 50%;
    }

    /* 表单和输入元素的深色模式样式 */
    body.auto-theme.dark-mode .form-control {
      background-color: #333;
      border-color: #555;
      color: #fff;
    }
    
    body.auto-theme.dark-mode .form-control:focus {
      border-color: var(--ios-blue);
      box-shadow: 0 0 0 0.2rem rgba(10, 132, 255, 0.25);
    }
    
    body.auto-theme.dark-mode .input-group-text {
      background-color: #333;
      border-color: #555;
      color: #fff;
    }
    
    body.auto-theme.dark-mode ::placeholder {
      color: #999;
      opacity: 1;
    }
    
    /* 卡片内文本的可读性增强 */
    body.auto-theme.dark-mode .card {
      color: #fff;
    }
    
    body.auto-theme.dark-mode .card-header,
    body.auto-theme.dark-mode .card-footer {
      background-color: rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 按钮悬停状态 */
    body.auto-theme.dark-mode .btn-primary:hover {
      background-color: #0071e3;
      border-color: #0071e3;
    }
    
    body.auto-theme.dark-mode .btn-outline-primary:hover {
      background-color: var(--ios-blue);
      color: #fff;
    }
    
    /* 下拉菜单 */
    body.auto-theme.dark-mode .dropdown-menu {
      background-color: #333;
      border-color: #555;
    }
    
    body.auto-theme.dark-mode .dropdown-item {
      color: #fff;
    }
    
    body.auto-theme.dark-mode .dropdown-item:hover,
    body.auto-theme.dark-mode .dropdown-item:focus {
      background-color: #444;
      color: #fff;
    }
    
    /* 导航选中状态 */
    /* 注释掉以避免影响外部导航栏
    body.auto-theme.dark-mode .navbar-light .navbar-nav .nav-link.active,
    body.auto-theme.dark-mode .navbar-light .navbar-nav .nav-link:hover {
      color: var(--ios-blue);
    }
    */

    /* 特定元素的深色模式样式 */
    
    /* Hero section background */
    body.auto-theme.dark-mode .hero-section {
      background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('./img/hero-bg.jpg');
    }
    
    /* Features section */
    body.auto-theme.dark-mode .features-section .card {
      background-color: var(--card-background);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }
    
    /* Testimonials */
    body.auto-theme.dark-mode .testimonials-section {
      background-color: var(--ios-secondary-background);
    }
    
    body.auto-theme.dark-mode .testimonial-card {
      background-color: var(--card-background);
    }
    
    /* Footer */
    body.auto-theme.dark-mode footer {
      background-color: var(--ios-tertiary-background);
      color: var(--text-color);
      border-top: 1px solid var(--border-color);
    }
    
    /* Buttons */
    body.auto-theme.dark-mode .btn-primary {
      background-color: var(--ios-blue);
      border-color: var(--ios-blue);
    }
    
    body.auto-theme.dark-mode .btn-outline-primary {
      color: var(--ios-blue);
      border-color: var(--ios-blue);
    }
    
    /* Badges and highlights */
    body.auto-theme.dark-mode .badge-primary {
      background-color: var(--ios-blue);
    }
    
    /* Logo and navigation */
    /* 注释掉以避免影响外部导航栏
    body.auto-theme.dark-mode .navbar-light .navbar-brand,
    body.auto-theme.dark-mode .navbar-light .navbar-nav .nav-link {
      color: var(--text-color);
    }
    */
    
    /* Login/Signup Modal */
    body.auto-theme.dark-mode #loginModal .modal-content,
    body.auto-theme.dark-mode #signupModal .modal-content {
      background-color: var(--ios-tertiary-background);
    }
    
    /* Carousel indicators */
    body.auto-theme.dark-mode .carousel-indicators li {
      background-color: var(--ios-gray);
    }
    
    body.auto-theme.dark-mode .carousel-indicators li.active {
      background-color: var(--ios-blue);
    }
    
    /* Tables */
    body.auto-theme.dark-mode .table {
      color: var(--text-color);
    }
    
    body.auto-theme.dark-mode .table-striped tbody tr:nth-of-type(odd) {
      background-color: rgba(255, 255, 255, 0.05);
    }
    
    /* Callout sections */
    body.auto-theme.dark-mode .callout-section {
      background-color: var(--ios-secondary-background);
    }
    
    /* Code blocks and pre tags */
    body.auto-theme.dark-mode pre, 
    body.auto-theme.dark-mode code {
      background-color: var(--ios-tertiary-background);
      color: var(--ios-green);
    }
    
    /* 深色模式下卡片和公告栏的强化样式 */
    body.auto-theme.dark-mode .card,
    body.auto-theme.dark-mode .announcement-card,
    body.auto-theme.dark-mode .info-card {
      background-color: #1C1C1E !important; /* 更深的背景色 */
      color: #FFFFFF !important; /* 白色文字 */
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    
    /* 特别增强公告栏的深色效果 */
    body.auto-theme.dark-mode .announcements-section {
      background-color: #2C2C2E !important;
    }
    
    /* 卡片标题和强调文本 */
    body.auto-theme.dark-mode .card-title,
    body.auto-theme.dark-mode .card h3,
    body.auto-theme.dark-mode .card h4,
    body.auto-theme.dark-mode .card h5 {
      color: #FFFFFF !important;
    }
    
    /* 图标颜色调整 */
    body.auto-theme.dark-mode .card i.fas,
    body.auto-theme.dark-mode .card i.far,
    body.auto-theme.dark-mode .card i.fab {
      color: #0A84FF !important; /* iOS蓝色 */
    }
    
    /* 链接颜色强化 */
    body.auto-theme.dark-mode .card a,
    body.auto-theme.dark-mode a.card-link {
      color: #0A84FF !important; /* iOS蓝色 */
      text-decoration: none;
    }
    
    body.auto-theme.dark-mode .card a:hover,
    body.auto-theme.dark-mode a.card-link:hover {
      color: #64D2FF !important; /* 浅蓝色 */
      text-decoration: underline;
    }
    
    /* 次要文本颜色调整 */
    body.auto-theme.dark-mode .card .text-muted,
    body.auto-theme.dark-mode .card .card-subtitle {
      color: #98989D !important; /* 灰色文字 */
    }
    
    /* 公告标题 */
    body.auto-theme.dark-mode .announcement-title,
    body.auto-theme.dark-mode .section-title {
      color: #FFFFFF !important;
    }
    
    /* 卡片内部元素 */
    body.auto-theme.dark-mode .card-header {
      background-color: #2C2C2E !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    body.auto-theme.dark-mode .card-footer {
      background-color: #2C2C2E !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 确保背景覆盖整个页面 */
    body.auto-theme.dark-mode {
      background-color: #000000 !important;
    }
    
    /* 调整首页标题颜色 */
    body.auto-theme.dark-mode .main-heading,
    body.auto-theme.dark-mode .welcome-text {
      color: #FFFFFF !important;
    }
    
    /* 特殊图标颜色调整 */
    body.auto-theme.dark-mode .icon-light {
      color: #FFFFFF !important;
    }
    
    body.auto-theme.dark-mode .icon-primary {
      color: #0A84FF !important;
    }
    
    body.auto-theme.dark-mode .icon-success {
      color: #30D158 !important;
    }
    
    body.auto-theme.dark-mode .icon-warning {
      color: #FFD60A !important;
    }
    
    body.auto-theme.dark-mode .icon-danger {
      color: #FF453A !important;
    }
    
    /* 针对首页公告卡片的具体样式 */
    body.auto-theme.dark-mode .announcement-item,
    body.auto-theme.dark-mode .announcement-card,
    body.auto-theme.dark-mode .welcome-card {
      background-color: #2C2C2E !important; 
      color: #FFFFFF !important;
      border-radius: 12px;
      margin-bottom: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    
    /* 增强卡片的视觉层次感 */
    body.auto-theme.dark-mode .card {
      border: none !important;
      border-radius: 12px;
      overflow: hidden;
    }
    
    /* 针对emoji和图标的颜色调整 */
    body.auto-theme.dark-mode .announcement-item .emoji,
    body.auto-theme.dark-mode .card .emoji {
      filter: brightness(1.2);
    }
    
    /* 针对页面顶部的主容器 */
    body.auto-theme.dark-mode .main-container,
    body.auto-theme.dark-mode .container-fluid,
    body.auto-theme.dark-mode .container {
      background-color: #000000 !important;
    }
    
    /* 修复特定的页面元素背景 */
    body.auto-theme.dark-mode #announcements,
    body.auto-theme.dark-mode .main-content,
    body.auto-theme.dark-mode #main-content {
      background-color: transparent !important;
    }
    
    /* 调整标题和强调文本 */
    body.auto-theme.dark-mode h1,
    body.auto-theme.dark-mode h2,
    body.auto-theme.dark-mode h3,
    body.auto-theme.dark-mode .display-4,
    body.auto-theme.dark-mode .lead {
      color: #FFFFFF !important;
    }
    
    /* 强调文本的可读性 */
    body.auto-theme.dark-mode .card p,
    body.auto-theme.dark-mode .card li {
      color: #EBEBF5 !important;
    }
    
    /* 页脚文本 */
    body.auto-theme.dark-mode footer,
    body.auto-theme.dark-mode footer p,
    body.auto-theme.dark-mode footer a {
      color: #EBEBF5 !important;
    }
    
    /* 覆盖页面主背景以防有遗漏 */
    body.auto-theme.dark-mode main,
    body.auto-theme.dark-mode .content-wrapper,
    body.auto-theme.dark-mode .page-wrapper {
      background-color: #000000 !important;
    }
    
    /* 针对announcement-card类的深色模式样式 */
    body.auto-theme.dark-mode .announcement-card,
    body.auto-theme.dark-mode .announcement-item {
      background-color: #1C1C1E !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 更新卡片内部的标题和文本 */
    body.auto-theme.dark-mode .announcement-card .announcement-title,
    body.auto-theme.dark-mode .announcement-item h3,
    body.auto-theme.dark-mode .announcement-item h4,
    body.auto-theme.dark-mode .announcement-card h3,
    body.auto-theme.dark-mode .announcement-card h4 {
      color: #FFFFFF !important;
    }
    
    body.auto-theme.dark-mode .announcement-card p,
    body.auto-theme.dark-mode .announcement-item p,
    body.auto-theme.dark-mode .announcement-card .card-text,
    body.auto-theme.dark-mode .announcement-item .card-text {
      color: #EBEBF5 !important;
    }
    
    /* 调整iOS深度效果在深色模式下的表现 */
    body.auto-theme.dark-mode .ios-depth-effect::before {
      background: linear-gradient(180deg, 
        rgba(50, 50, 50, 0.1) 0%, 
        rgba(30, 30, 30, 0) 100%);
    }
    
    /* 调整iOS卡片光泽效果 */
    body.auto-theme.dark-mode .ios-shine-effect::after {
      background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(50, 50, 50, 0) 30%,
        rgba(50, 50, 50, 0.1) 50%,
        rgba(50, 50, 50, 0) 70%,
        transparent 100%
      );
    }
    
    /* 针对公告条的深色模式优化 */
    body.auto-theme.dark-mode .announcement-header,
    body.auto-theme.dark-mode .announcement-body,
    body.auto-theme.dark-mode .announcement-footer {
      background-color: #2C2C2E !important;
      color: #FFFFFF !important;
    }
    
    /* 卡片徽标和标记 */
    body.auto-theme.dark-mode .badge {
      background-color: #3A3A3C !important;
      color: #FFFFFF !important;
    }
    
    body.auto-theme.dark-mode .badge-primary {
      background-color: #0A84FF !important;
    }
    
    body.auto-theme.dark-mode .badge-success {
      background-color: #30D158 !important;
    }
    
    body.auto-theme.dark-mode .badge-warning {
      background-color: #FFD60A !important;
      color: #000000 !important;
    }
    
    body.auto-theme.dark-mode .badge-danger {
      background-color: #FF453A !important;
    }
    
    /* 公告图标 */
    body.auto-theme.dark-mode .announcement-icon {
      color: #0A84FF !important;
    }
    
    /* 主容器 */
    body.auto-theme.dark-mode .main-container {
      background-color: #000000 !important;
    }
    
    /* 强制应用于任何白色背景的元素 */
    body.auto-theme.dark-mode [class*="bg-white"],
    body.auto-theme.dark-mode .bg-white,
    body.auto-theme.dark-mode [style*="background-color: white"],
    body.auto-theme.dark-mode [style*="background-color: #fff"],
    body.auto-theme.dark-mode [style*="background-color:#fff"],
    body.auto-theme.dark-mode [style*="background-color: rgb(255, 255, 255)"],
    body.auto-theme.dark-mode [style*="background-color:rgb(255,255,255)"] {
      background-color: #1C1C1E !important;
      color: #FFFFFF !important;
    }
    
    /* 特定针对灰色背景容器 */
    body.auto-theme.dark-mode .container-gray,
    body.auto-theme.dark-mode .gray-bg,
    body.auto-theme.dark-mode .bg-light,
    body.auto-theme.dark-mode .light-bg {
      background-color: #000000 !important;
    }
    
    /* 首页欢迎区域 */
    body.auto-theme.dark-mode .welcome-area,
    body.auto-theme.dark-mode .welcome-section,
    body.auto-theme.dark-mode .welcome-container {
      background-color: #000000 !important;
      color: #FFFFFF !important;
    }
    
    /* 主页hero区域 */
    body.auto-theme.dark-mode .hero-section {
      background-color: #1C1C1E !important;
    }
    
    /* 首页公告卡片内容的深色模式微调 */
    body.auto-theme.dark-mode .content-card,
    body.auto-theme.dark-mode #announcementList .card,
    body.auto-theme.dark-mode .announcements-list .card {
      background-color: #2C2C2E !important;
      border: none !important;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* 主卡片容器背景 */
    body.auto-theme.dark-mode .main-card-container,
    body.auto-theme.dark-mode .page-container,
    body.auto-theme.dark-mode .app-container {
      background-color: #000000 !important;
    }
    
    /* 公告项目标题加粗 */
    body.auto-theme.dark-mode .announcement-title,
    body.auto-theme.dark-mode .card-title {
      color: #FFFFFF !important;
      font-weight: 600 !important;
    }
    
    /* 针对截图中的图标处理 */
    body.auto-theme.dark-mode .emoji-icon,
    body.auto-theme.dark-mode .card .emoji {
      /* 保持原始颜色，无需暗化 */
      filter: none !important;
      opacity: 1 !important;
    }
    
    /* 主页卡片中链接文本的可见性 */
    body.auto-theme.dark-mode .card a:not(.btn) {
      color: #0A84FF !important;
      text-decoration: none;
    }
    
    body.auto-theme.dark-mode .card a:not(.btn):hover {
      text-decoration: underline;
    }
    
    /* 针对灰色背景的圆角卡片 */
    body.auto-theme.dark-mode .rounded-card,
    body.auto-theme.dark-mode .gray-card,
    body.auto-theme.dark-mode .bg-light.card {
      background-color: #2C2C2E !important;
      color: #FFFFFF !important;
    }
    
    /* 首页标题强调 */
    body.auto-theme.dark-mode .welcome-text,
    body.auto-theme.dark-mode .site-title,
    body.auto-theme.dark-mode .main-title {
      color: #FFFFFF !important;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    /* 全局页面背景固定为黑色 */
    body.auto-theme.dark-mode {
      background-color: #000000 !important;
    }
    
    /* 确保深色模式下所有卡片有一致的视觉效果 */
    body.auto-theme.dark-mode .card,
    body.auto-theme.dark-mode .card-body,
    body.auto-theme.dark-mode [class*="card-"] {
      background-color: #2C2C2E !important;
      color: #FFFFFF !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 增强深色模式下的卡片和公告栏样式 */
    body.auto-theme.dark-mode .feature-card,
    body.auto-theme.dark-mode .info-card {
      background-color: var(--card-dark-bg);
      color: var(--text-color);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }
    
    /* 针对特殊颜色卡片的深色模式样式 */
    body.auto-theme.dark-mode .feature-card:nth-child(1),
    body.auto-theme.dark-mode .info-card:nth-child(1) {
      background-color: var(--card-dark-bg);
    }
    
    body.auto-theme.dark-mode .feature-card:nth-child(2),
    body.auto-theme.dark-mode .info-card:nth-child(2) {
      background-color: var(--card-blue-bg);
    }
    
    body.auto-theme.dark-mode .feature-card:nth-child(3),
    body.auto-theme.dark-mode .info-card:nth-child(3) {
      background-color: var(--card-dark-bg);
    }
    
    body.auto-theme.dark-mode .join-card {
      background-color: var(--card-purple-bg);
    }
    
    /* 增强深色模式下的文本对比度 */
    body.auto-theme.dark-mode .feature-card h2,
    body.auto-theme.dark-mode .info-card h2,
    body.auto-theme.dark-mode .join-card h2 {
      color: #FFFFFF;
    }
    
    body.auto-theme.dark-mode .feature-card p,
    body.auto-theme.dark-mode .info-card p,
    body.auto-theme.dark-mode .join-card p {
      color: #F2F2F7;
    }
    
    /* 调整深色模式下的图标色彩 */
    body.auto-theme.dark-mode .feature-card i,
    body.auto-theme.dark-mode .info-card i,
    body.auto-theme.dark-mode .check-item i {
      color: #64D2FF; /* 使用iOS深色模式的青色图标 */
    }
    
    body.auto-theme.dark-mode .check-item i.fa-check-circle {
      color: #30D158; /* 使用iOS深色模式的绿色图标 */
    }
    
    /* 确保深色模式下公告和通知有足够对比度 */
    body.auto-theme.dark-mode .announcement-card {
      background-color: #1E3A5F;
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    body.auto-theme.dark-mode .notification {
      background-color: #3A2E5F;
      color: #FFFFFF;
    }
    
    /* 改进特定元素的深色样式 */
    body.auto-theme.dark-mode .check-item {
      color: #F2F2F7;
    }
    
    body.auto-theme.dark-mode .sub-text {
      color: #E5E5EA;
    }
    
    /* 针对按钮的增强对比度 */
    body.auto-theme.dark-mode .btn-primary {
      background-color: #0A84FF;
      border-color: #0A84FF;
      color: #FFFFFF;
    }
    
    body.auto-theme.dark-mode .btn-outline-light {
      border-color: #FFFFFF;
      color: #FFFFFF;
    }
    
    body.auto-theme.dark-mode .btn-outline-light:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    /* 首页特色卡片的深色模式增强 */
    body.auto-theme.dark-mode .feature-card {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* "What is a Carbon Account?" 卡片 */
    body.auto-theme.dark-mode .feature-card:nth-child(1) {
      background-color: #222222; /* 深灰色背景 */
    }
    
    /* "How to Use CarbonTrack" 卡片 */
    body.auto-theme.dark-mode .feature-card:nth-child(2) {
      background-color: #003366; /* 深蓝色背景 */
    }
    
    /* "Why Use a Carbon Account?" 卡片 */
    body.auto-theme.dark-mode .feature-card:nth-child(3) {
      background-color: #222222; /* 深灰色背景 */
    }
    
    /* "Join Our Team!" 卡片 */
    body.auto-theme.dark-mode .join-card {
      background-color: #3B2B63; /* 深紫色背景 */
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 卡片标题更高对比度 */
    body.auto-theme.dark-mode .feature-card h2,
    body.auto-theme.dark-mode .join-card h2 {
      color: white;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      font-weight: 600;
    }
    
    /* 第二张卡片的蓝色标题增强 */
    body.auto-theme.dark-mode .feature-card:nth-child(2) h2 {
      color: #66CCFF;
    }
    
    /* 卡片文本更高对比度 */
    body.auto-theme.dark-mode .feature-card p,
    body.auto-theme.dark-mode .join-card p {
      color: rgba(255, 255, 255, 0.9);
      font-weight: 400;
    }
    
    /* 第二张卡片（蓝色）的检查项目样式 */
    body.auto-theme.dark-mode .feature-card:nth-child(2) .check-item {
      color: white;
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
    }
    
    /* 绿色卡片（右侧）的检查项目样式 */
    body.auto-theme.dark-mode .feature-card:nth-child(3) .check-item {
      color: white;
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;
    }
    
    /* 检查图标样式增强 */
    body.auto-theme.dark-mode .feature-card:nth-child(2) .check-item i {
      color: white;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 14px;
    }
    
    /* 绿色检查图标样式增强 */
    body.auto-theme.dark-mode .feature-card:nth-child(3) .check-item i {
      color: #30D158; /* iOS深色模式绿色 */
      font-size: 20px;
      margin-right: 12px;
    }
    
    /* 卡片内部次要文本 */
    body.auto-theme.dark-mode .feature-card .sub-text {
      color: rgba(255, 255, 255, 0.7);
    }
    
    /* 改进所有卡片的边距和填充 */
    body.auto-theme.dark-mode .feature-card,
    body.auto-theme.dark-mode .join-card {
      padding: 25px;
      border-radius: 20px;
    }
    
    /* 为卡片添加细微的悬停效果 */
    body.auto-theme.dark-mode .feature-card:hover,
    body.auto-theme.dark-mode .join-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
      transition: all 0.3s ease;
    }
    
    /* 修复footer在深色模式下的样式 */
    
    /* 确保footer容器在深色模式下有正确的背景色 */
    body.auto-theme.dark-mode #footer-placeholder,
    body.auto-theme.dark-mode #footer-placeholder > .footer {
      background-color: #1C1C1E;
      color: #98989D;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 确保footer内的所有元素在深色模式下有正确的颜色 */
    body.auto-theme.dark-mode #footer-placeholder p,
    body.auto-theme.dark-mode #footer-placeholder a:not(:hover) {
      color: #98989D;
    }
    
    /* 确保悬停状态的链接是主题蓝色 */
    body.auto-theme.dark-mode #footer-placeholder a:hover {
      color: var(--ios-blue);
    }
    
    /* 添加过渡效果，确保主题切换平滑 */
    #footer-placeholder {
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    /* 确保footer加载完成前，占位符不显示为黑块 */
    #footer-placeholder:empty {
      display: none;
    }
    
    /* 移除所有导航栏相关的黑暗模式样式，确保导航栏保持原样 */
    /* 1. 先重置navbar-container内的所有元素，确保它们不受黑暗模式影响 */
    body.auto-theme.dark-mode #navbar-container,
    body.auto-theme.dark-mode #navbar-container * {
      /* 保持navbar原样，重置可能的黑暗模式影响 */
      background-color: unset !important;
      border-color: unset !important;
      text-shadow: unset !important;
      box-shadow: unset !important;
    }
    
    /* 2. 确保导航栏的JavaScript不会受到影响 */
    #navbar-container {
      /* 指定z-index确保导航栏始终在页面内容之上 */
      position: relative;
      z-index: 1030;
    }
    
    /* 3. 恢复导航栏的原始样式 */
    body.auto-theme.dark-mode #navbar-container .navbar {
      background-color: #002A5C !important;
    }
    
    body.auto-theme.dark-mode #navbar-container .navbar-brand,
    body.auto-theme.dark-mode #navbar-container .nav-link,
    body.auto-theme.dark-mode #navbar-container .navbar-text,
    body.auto-theme.dark-mode #navbar-container span,
    body.auto-theme.dark-mode #navbar-container a {
      color: rgba(255, 255, 255, 0.9) !important;
    }
    
    body.auto-theme.dark-mode #navbar-container .nav-link:hover,
    body.auto-theme.dark-mode #navbar-container a:hover {
      color: white !important;
    }
    
    body.auto-theme.dark-mode #navbar-container .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    /* 导航栏按钮样式 */
    body.auto-theme.dark-mode #navbar-container .btn-danger,
    body.auto-theme.dark-mode #navbar-container #logoutButton {
      background-color: #dc3545 !important;
      border-color: #dc3545 !important;
      color: white !important;
    }
    
    /* 导航栏下拉菜单 */
    body.auto-theme.dark-mode #navbar-container .dropdown-menu {
      background-color: white !important;
      color: #212529 !important;
      border: 1px solid rgba(0, 0, 0, 0.15) !important;
    }
    
    /* 导航栏图标 */
    body.auto-theme.dark-mode #navbar-container .fas,
    body.auto-theme.dark-mode #navbar-container .fa-envelope {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* 幻灯片文字背景在黑暗模式下的样式 */
    body.auto-theme.dark-mode .carousel-caption {
      background-color: rgba(0, 0, 0, 0.7) !important;
      color: white !important;
      border-radius: 10px;
      padding: 20px;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      max-width: 600px;
      margin: 0 auto;
    }
    
    /* 同时优化浅色模式下的幻灯片标题样式 */
    .carousel-caption {
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      padding: 20px;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      margin: 0 auto;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    body.auto-theme.dark-mode .carousel-caption h2 {
      color: white !important;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      margin-bottom: 10px;
      font-weight: 600;
    }
    
    body.auto-theme.dark-mode .carousel-caption p {
      color: rgba(255, 255, 255, 0.9) !important;
      font-size: 18px;
      line-height: 1.5;
    }
    
    /* 导航栏按钮和特殊元素样式 */
    body.auto-theme.dark-mode #navbar-container .btn {
      /* 恢复按钮样式 */
      background-color: unset;
      border-color: unset;
    }
    
    body.auto-theme.dark-mode #navbar-container .btn-danger,
    body.auto-theme.dark-mode #navbar-container #logoutButton {
      background-color: #dc3545 !important;
      border-color: #dc3545 !important;
      color: white !important;
    }
    
    /* 消息通知徽章 */
    body.auto-theme.dark-mode #navbar-container .badge-danger {
      background-color: #dc3545 !important;
      color: white !important;
    }
    
    /* 导航栏下拉菜单 */
    body.auto-theme.dark-mode #navbar-container .dropdown-menu {
      background-color: #002A5C !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    body.auto-theme.dark-mode #navbar-container .dropdown-item {
      color: rgba(255, 255, 255, 0.9) !important;
    }
    
    body.auto-theme.dark-mode #navbar-container .dropdown-item:hover,
    body.auto-theme.dark-mode #navbar-container .dropdown-item:focus {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: white !important;
    }
    
    /* 针对announcement-card类的深色模式样式 */
    body.auto-theme.dark-mode .announcement-card,
    body.auto-theme.dark-mode .announcement-item {
      background-color: #1C1C1E !important;
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 更新卡片内部的标题和文本 */
    body.auto-theme.dark-mode .announcement-card .announcement-title,
    body.auto-theme.dark-mode .announcement-item h3,
    body.auto-theme.dark-mode .announcement-item h4,
    body.auto-theme.dark-mode .announcement-card h3,
    body.auto-theme.dark-mode .announcement-card h4 {
      color: #FFFFFF !important;
    }
    
    body.auto-theme.dark-mode .announcement-card p,
    body.auto-theme.dark-mode .announcement-item p,
    body.auto-theme.dark-mode .announcement-card .card-text,
    body.auto-theme.dark-mode .announcement-item .card-text {
      color: #EBEBF5 !important;
    }
    
    /* 针对announcement-section的黑暗模式样式 */
    body.auto-theme.dark-mode .announcement-section {
      background-color: #000000 !important;
    }
    
    body.auto-theme.dark-mode .announcement-section::before {
      background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.8) 20%,
        rgba(0, 0, 0, 1) 100%) !important;
    }
    
    /* 确保announcement-footer在黑暗模式下有正确的背景色 */
    body.auto-theme.dark-mode .announcement-footer {
      background-color: #1C1C1E !important;
      color: #EBEBF5 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 15px !important;
      border-radius: 0 0 10px 10px !important;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 修复"How CarbonTrack Works"部分在黑暗模式下的样式 */
    body.auto-theme.dark-mode h1, 
    body.auto-theme.dark-mode h2, 
    body.auto-theme.dark-mode h3 {
      color: white !important;
    }
    
    /* 为整个页面在黑暗模式下设置背景色 */
    body.auto-theme.dark-mode {
      background-color: #000000 !important;
    }
    
    /* 确保所有区域的标题文本在黑暗模式下可见 */
    body.auto-theme.dark-mode .section-title,
    body.auto-theme.dark-mode .section-header {
      color: white !important;
    }
    
    /* 修复emoji在黑暗模式下变蓝的问题 */
    body.auto-theme.dark-mode .announcement-heading,
    body.auto-theme.dark-mode .announcement-subheading {
      color: #FFFFFF !important;
    }
    
    /* 所有emoji使用默认颜色，不受主题影响 */
    .emoji {
      /* 使用默认渲染，禁用任何可能修改颜色的效果 */
      color: inherit !important;
      text-shadow: none !important;
      filter: none !important;
      -webkit-text-fill-color: initial !important;
      /* 确保emoji字体渲染正确 */
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
      /* 附加样式增强可见性 */
      position: relative !important;
      z-index: 5 !important;
    }
    
    /* 标题中的emoji特殊处理 */
    h1 .emoji, h2 .emoji, h3 .emoji, 
    h4 .emoji, h5 .emoji, h6 .emoji,
    p .emoji, span .emoji, div .emoji {
      /* 在任何文本容器中强制使用emoji原始样式 */
      color: initial !important;
      -webkit-text-fill-color: initial !important;
      text-shadow: none !important;
    }
    
    /* 为欢迎标题中的emoji单独设置样式 */
    .announcement-heading .emoji-earth {
      font-size: 120% !important; /* 更大，增强可见性 */
      vertical-align: middle !important;
      margin-left: 5px !important;
      display: inline-block !important;
      color: inherit !important; /* 移除之前的transparent设置 */
      background: transparent !important;
      -webkit-text-fill-color: initial !important;
      text-shadow: none !important;
      position: relative !important; 
      z-index: 100 !important; /* 提高z-index确保显示 */
    }
    
    /* 确保title中的emoji不会被文本颜色覆盖 */
    body.auto-theme.dark-mode .announcement-heading span.emoji {
      color: initial !important;
      -webkit-text-fill-color: initial !important;
      background-color: transparent !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    /* 使用属性选择器专门针对emoji字符 */
    [class*="emoji-"] {
      /* 保持emoji原样 */
      color: inherit !important;
      text-shadow: none !important;
      filter: none !important;
    }
    
    /* 移除announcement-icon上的颜色样式以避免影响emoji */
    body.auto-theme.dark-mode .announcement-icon {
      color: inherit !important;
      background: transparent !important;
      filter: none !important;
    }
    
    /* 单独为每个announcement图标创建彩色背景，而不是给emoji上色 */
    .announcement-icon.emoji-bulb-container {
      background-color: rgba(255, 204, 0, 0.2) !important;
      border-radius: 50%;
      padding: 12px;
    }
    
    .announcement-icon.emoji-medal-container {
      background-color: rgba(0, 122, 255, 0.2) !important;
      border-radius: 50%;
      padding: 12px;
    }
    
    .announcement-icon.emoji-plant-container {
      background-color: rgba(52, 199, 89, 0.2) !important;
      border-radius: 50%;
      padding: 12px;
    }
    
    .announcement-icon.emoji-scale-container {
      background-color: rgba(88, 86, 214, 0.2) !important;
      border-radius: 50%;
      padding: 12px;
    }
    
    /* 深色模式下的section-reveal和feature-section样式 */
    body.auto-theme.dark-mode .section-reveal::before {
      background-color: var(--ios-system-background); /* 使用深色模式变量 */
    }
    
    body.auto-theme.dark-mode .feature-section {
      background: linear-gradient(180deg, 
        var(--ios-tertiary-background) 0%,
        rgba(28, 28, 30, 0.8) 100%);
    }
    
    body.auto-theme.dark-mode .feature-section::before {
      background: radial-gradient(circle, rgba(10, 132, 255, 0.15) 0%, rgba(10, 132, 255, 0) 70%);
    }
    
    body.auto-theme.dark-mode .feature-section::after {
      background: radial-gradient(circle, rgba(94, 92, 230, 0.15) 0%, rgba(94, 92, 230, 0) 70%);
    }
    
    /* 确保section-reveal在深色模式下正确显示 */
    body.auto-theme.dark-mode .section-reveal > * {
      color: var(--text-color); /* 使用深色模式文本颜色 */
    }
    
    /* 修复section-reveal visible状态在深色模式下的问题 */
    body.auto-theme.dark-mode .section-reveal.visible::before {
      transform: translateY(-100%);
      background-color: var(--ios-system-background);
    }
    
    /* 修复所有section类型在深色模式下的样式问题 */
    
    /* 通用section背景修复 */
    body.auto-theme.dark-mode .section {
      background-color: var(--ios-system-background);
    }
    
    /* 修复section-reveal的::before伪元素 */
    body.auto-theme.dark-mode .section-reveal::before,
    body.auto-theme.dark-mode .section-reveal.visible::before {
      background-color: var(--ios-system-background);
    }
    
    /* 修复feature-section的背景和伪元素 */
    body.auto-theme.dark-mode .feature-section {
      background: linear-gradient(180deg, 
        var(--ios-system-background) 0%,
        var(--ios-tertiary-background) 100%);
    }
    
    /* 修复announcement-section的背景和伪元素 */
    body.auto-theme.dark-mode .announcement-section::before {
      background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0) 0%,
        rgba(28, 28, 30, 0.8) 20%,
        rgba(28, 28, 30, 1) 100%);
    }
    
    /* 修复其他可能的section背景 */
    body.auto-theme.dark-mode .hero-section,
    body.auto-theme.dark-mode .testimonials-section,
    body.auto-theme.dark-mode .callout-section,
    body.auto-theme.dark-mode .welcome-section {
      background-color: var(--ios-system-background);
    }
    
    /* 确保所有section内容在深色模式下可见 */
    body.auto-theme.dark-mode section {
      color: var(--text-color);
    }
    
    /* 修复section-reveal的伪元素在深色模式下的显示问题 */
    body.auto-theme.dark-mode .section-reveal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--ios-system-background);
      transform: translateY(0);
      transition: transform var(--animation-duration-medium) var(--animation-timing-apple);
      z-index: 1;
    }
    
    /* 确保section-reveal在深色模式下的过渡效果正确 */
    body.auto-theme.dark-mode .section-reveal.visible::before {
      transform: translateY(-100%);
    }
    
    /* 修复feature-section在深色模式下的伪元素 */
    body.auto-theme.dark-mode .feature-section::before,
    body.auto-theme.dark-mode .feature-section::after {
      opacity: 0.5; /* 降低亮度，更适合深色模式 */
    }
    
    /* 确保所有section的边界在深色模式下也是深色的 */
    body.auto-theme.dark-mode section::before,
    body.auto-theme.dark-mode section::after {
      border-color: var(--border-color) !important;
    }
    
    /* 特别处理section-reveal的可见性问题 */
    body.auto-theme.dark-mode .section-reveal.visible {
      background-color: var(--ios-system-background);
    }
    
    /* 修复section-reveal在深色模式下的边界 */
    body.auto-theme.dark-mode .section-reveal {
      border-color: var(--border-color);
    }
    
    /* 确保深色模式下section内的容器背景也是深色的 */
    body.auto-theme.dark-mode section .container,
    body.auto-theme.dark-mode section .container-fluid {
      background-color: transparent;
    }

    .table {
      background-color: var(--card-bg-light, white); /* Use variable */
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }

    .table thead th {
      background-color: var(--card-bg-light, white); /* Use variable */
      color: var(--text-color);
      font-weight: 600;
    }
  </style>
  
  <!-- 添加内联脚本来修复emoji -->
  <script>
    // 页面加载后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 处理标题中的emoji
      const titleEmoji = document.querySelector('.announcement-heading .emoji');
      if (titleEmoji) {
        // 确保emoji正确显示
        titleEmoji.style.fontFamily = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif';
        titleEmoji.style.color = 'initial';
        titleEmoji.style.webkitTextFillColor = 'initial';
        titleEmoji.style.textShadow = 'none';
        titleEmoji.style.filter = 'none';
        titleEmoji.style.display = 'inline-block';
        titleEmoji.style.backgroundColor = 'transparent';
        titleEmoji.style.fontSize = '1.2em';
        titleEmoji.style.verticalAlign = 'middle';
        titleEmoji.style.marginLeft = '8px';
        
        // 强制刷新emoji显示
        const originalText = titleEmoji.innerHTML;
        titleEmoji.innerHTML = '';
        setTimeout(() => {
          titleEmoji.innerHTML = originalText;
        }, 50);
      } else {
        // 如果没有找到emoji，创建一个新的
        const headingElement = document.querySelector('.announcement-heading');
        if (headingElement) {
          const emojiSpan = document.createElement('span');
          emojiSpan.className = 'emoji emoji-earth';
          emojiSpan.textContent = '🌍';
          emojiSpan.style.fontFamily = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif';
          emojiSpan.style.color = 'initial';
          emojiSpan.style.webkitTextFillColor = 'initial';
          emojiSpan.style.textShadow = 'none';
          emojiSpan.style.filter = 'none';
          emojiSpan.style.display = 'inline-block';
          emojiSpan.style.fontSize = '1.2em';
          emojiSpan.style.verticalAlign = 'middle';
          emojiSpan.style.marginLeft = '8px';
          headingElement.appendChild(document.createTextNode(' '));
          headingElement.appendChild(emojiSpan);
        }
      }
      
      // 处理所有emoji
      const allEmojis = document.querySelectorAll('.emoji');
      allEmojis.forEach(emoji => {
        emoji.style.fontFamily = '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif';
        emoji.style.color = 'initial';
        emoji.style.webkitTextFillColor = 'initial';
        emoji.style.textShadow = 'none';
        emoji.style.filter = 'none';
        emoji.style.backgroundColor = 'transparent';
        emoji.style.display = 'inline-block';
      });
    });
  </script>
</head>
<body class="auto-theme">
<!-- 导航栏容器，将由JavaScript加载 -->
<div id="navbar-container"></div>

<!-- Hero Carousel -->
<section class="hero-section parallax-container">
  <div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
      <li data-target="#carousel" data-slide-to="3"></li>
      <li data-target="#carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/eg1.jpeg" alt="可持续发展" class="parallax-bg">
        <div class="carousel-caption d-none d-md-block hero-caption-animate">
          <h2>Track Your Carbon Footprint</h2>
          <p>Join the movement for a sustainable future</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/eg2.jpeg" alt="环保行动" class="parallax-bg">
        <div class="carousel-caption d-none d-md-block hero-caption-animate">
          <h2>Take Action Today</h2>
          <p>Small changes lead to big impacts</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/eg3.jpeg" alt="校园活动" class="parallax-bg">
        <div class="carousel-caption d-none d-md-block hero-caption-animate">
          <h2>Campus Sustainability</h2>
          <p>Students leading the way to a greener future</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/eg4.jpeg" alt="可再生能源" class="parallax-bg">
        <div class="carousel-caption d-none d-md-block hero-caption-animate">
          <h2>Earn Carbon Credits</h2>
          <p>Get rewarded for your environmental contributions</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="img/eg5.jpeg" alt="社区参与" class="parallax-bg">
        <div class="carousel-caption d-none d-md-block hero-caption-animate">
          <h2>Join Our Community</h2>
          <p>Connect with like-minded sustainability advocates</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</section>

<!-- Announcement Section -->
<section class="announcement-section">
<div class="container">
    <div class="announcement-card frosted-glass ios-depth-effect ios-shine-effect animate-on-scroll scale-in">
      <h2 class="announcement-heading ios-float">Welcome to CarbonTrack! <span class="emoji emoji-earth" style="display:inline-block; color:initial; -webkit-text-fill-color:initial;">🌍</span></h2>
      <p class="announcement-subheading animate-on-scroll fade-in"><span class="emoji emoji-announce">📢</span> Announcements</p>
      <div class="announcement-divider animate-on-scroll fade-in delay-100"></div>
      <ul class="announcement-list">
        <li class="announcement-item ios-depth-effect ripple-effect animate-on-scroll slide-up delay-100">
          <span class="announcement-icon announcement-icon-glow emoji-bulb-container"><span class="emoji emoji-bulb">💡</span></span>
          <div class="announcement-content">
            <p><strong>We Value Your Feedback!</strong> Have suggestions? Email us at <a href="mailto:carbontrack666@gmail.com">carbontrack666@gmail.com</a>.</p>
        </div>
        </li>
        <li class="announcement-item ios-depth-effect ripple-effect animate-on-scroll slide-up delay-200">
          <span class="announcement-icon announcement-icon-glow emoji-medal-container"><span class="emoji emoji-medal">🎖️</span></span>
          <div class="announcement-content">
            <p><strong>Earn Rewards!</strong> Log your sustainable actions and receive certificates, badges, and thank-you letters for your contributions.</p>
      </div>
        </li>
        <li class="announcement-item ios-depth-effect ripple-effect animate-on-scroll slide-up delay-300">
          <span class="announcement-icon announcement-icon-glow emoji-plant-container"><span class="emoji emoji-plant">🌱</span></span>
          <div class="announcement-content">
            <p><strong>Who Can Join?</strong> While CarbonTrack primarily serves students, anyone passionate about sustainability is welcome!</p>
    </div>
        </li>
        <li class="announcement-item ios-depth-effect ripple-effect animate-on-scroll slide-up delay-400">
          <span class="announcement-icon announcement-icon-glow emoji-scale-container"><span class="emoji emoji-scale">⚖️</span></span>
          <div class="announcement-content">
            <p><strong>Fair Play Matters!</strong> Cheating for Carbon Credits is strictly prohibited. We are committed to a transparent and fair system.</p>
        </div>
        </li>
      </ul>
      <p class="announcement-footer animate-on-scroll fade-in delay-500">Thank you for being part of CarbonTrack! Together, we can build a more sustainable future.</p>
      </div>
    </div>
</section>

<!-- Feature Cards Section -->
<section class="feature-section section-reveal">
  <div class="container">
    <h2 class="section-heading animate-on-scroll slide-up text-center">How CarbonTrack Works</h2>
    
    <div class="feature-grid">
      <div class="feature-card feature-card--white ios-hover-effect animate-on-scroll slide-up">
        <div class="feature-card__body">
          <h3 class="feature-card__title">What is a Carbon Account?</h3>
          <p class="feature-card__text">A Carbon Account is a tool that tracks CO<sub>2</sub> reductions from eco-friendly actions. By understanding our carbon footprint, we can make informed choices for a greener planet.</p>
      </div>
          </div>
      
      <div class="feature-card feature-card--blue ios-hover-effect animate-on-scroll slide-up delay-100">
        <div class="feature-card__body">
          <h3 class="feature-card__title">How to Use CarbonTrack?</h3>
          <ul class="feature-card__list">
            <li class="feature-card__list-item animate-on-scroll slide-up delay-100">
              <div class="feature-card__list-icon">
                <i class="fas fa-check-circle"></i>
          </div>
              <span><strong>Sign up & log in.</strong></span>
            </li>
            <li class="feature-card__list-item animate-on-scroll slide-up delay-200">
              <div class="feature-card__list-icon">
                <i class="fas fa-check-circle"></i>
      </div>
              <span><strong>Record sustainable actions</strong> in the Carbon Accounting Portal.</span>
            </li>
            <li class="feature-card__list-item animate-on-scroll slide-up delay-300">
              <div class="feature-card__list-icon">
                <i class="fas fa-check-circle"></i>
        </div>
              <span><strong>Earn Carbon Credits</strong> based on real CO<sub>2</sub> reductions.</span>
            </li>
            <li class="feature-card__list-item animate-on-scroll slide-up delay-400">
              <div class="feature-card__list-icon">
                <i class="fas fa-check-circle"></i>
      </div>
              <span><strong>Track progress & join challenges</strong> to win rewards!</span>
            </li>
          </ul>
    </div>
  </div>
      
      <div class="feature-card feature-card--white ios-hover-effect animate-on-scroll slide-up delay-200">
        <div class="feature-card__body">
          <h3 class="feature-card__title">Why Use a Carbon Account?</h3>
          <ul class="feature-card__list">
            <li class="feature-card__list-item animate-on-scroll slide-up delay-100">
              <div class="feature-card__list-icon">
                <i class="fas fa-check" style="color: var(--ios-green);"></i>
</div>
              <span><strong>Quantify your impact</strong> on carbon reduction.</span>
            </li>
            <li class="feature-card__list-item animate-on-scroll slide-up delay-200">
              <div class="feature-card__list-icon">
                <i class="fas fa-check" style="color: var(--ios-green);"></i>
      </div>
              <span><strong>Encourage long-term eco-friendly habits.</strong></span>
            </li>
            <li class="feature-card__list-item animate-on-scroll slide-up delay-300">
              <div class="feature-card__list-icon">
                <i class="fas fa-check" style="color: var(--ios-green);"></i>
          </div>
              <span><strong>Raise awareness & promote energy conservation.</strong></span>
            </li>
          </ul>
          </div>
            </div>

      <div class="feature-card feature-card--purple ios-hover-effect animate-on-scroll slide-up delay-300">
        <div class="feature-card__body">
          <h3 class="feature-card__title">Join Our Team!</h3>
          <p class="feature-card__text">Passionate about sustainability? Join CarbonTrack and become part of a global movement making a real environmental impact!</p>
          <a href="about.html" class="feature-card__button">Learn More</a>
          </div>
          </div>
        </div>
      </div>
</section>

<!-- Floating Action Button -->
<button class="floating-button ios-hover-effect fade-in" id="recordButton">
  <i class="fas fa-plus"></i>
        </button>

<!-- Footer -->
<div id="footer-placeholder"></div>

<script>
  // 页面加载时检查登录状态
  $(document).ready(function () {
    var loggedIn = localStorage.getItem('loggedIn')
    var expiration = localStorage.getItem('expiration')
    var now = new Date()

    if (loggedIn && expiration && now.getTime() < expiration) {
      var username = localStorage.getItem('username')
      updateLoginStatus()
      $('[data-target="#loginModal"]').hide()
      $('[data-target="#registerModal"]').hide()
      $('#logoutButton').show()
      $('a[href="center.html"]').show()
      $('a[href="calculate.html"]').show()
      $('a[href="CStore.html"]').show()
    } else {
      logout() // 如果过期或未登录，执行注销操作
      $('#userStatus').text('Please sign in or register:')
      // 显示登录和注册按钮，隐藏注销和用户中心按钮
      $('[data-target="#loginModal"]').show()
      $('[data-target="#registerModal"]').show()
      $('#logoutButton').hide()
      $('a[href="center.html"]').hide()
      $('a[href="calculate.html"]').hide()
      $('a[href="CStore.html"]').hide()
    }
    
    updateButtonForRemainingTime()
    
    // Fix for floating button
    $('#recordButton').click(function() {
      window.location.href = 'calculate.html';
    });
    
    // Collapsible Navigation - hide on scroll down, show on scroll up
    let lastScrollTop = 0;
    $(window).scroll(function() {
      let st = $(this).scrollTop();
      if (st > lastScrollTop && st > 70) {
        // Scroll down - hide navbar
        $('.navbar').addClass('navbar-scroll navbar-scroll-hidden');
      } else {
        // Scroll up - show navbar
        $('.navbar').addClass('navbar-scroll').removeClass('navbar-scroll-hidden');
      }
      
      // At the top, remove scroll styling
      if (st === 0) {
        $('.navbar').removeClass('navbar-scroll');
      }
      
      lastScrollTop = st;
    });
    
    // Prevent form submissions from index.html to avoid duplicate requests
    // The actual handlers are in nav.js
    $('#loginModal form').off('submit');
    $('#registerModal form').off('submit');
    $('#sendVerificationCode').off('click');
    
    // ===== iOS Animation System =====
    
    // Make floating button visible after a delay
    setTimeout(function() {
      $('.floating-button').addClass('visible');
    }, 800);
    
    // Initialize carousel animations
    initializeCarousel();
    
    // Set up the improved bi-directional scroll animations
    setupBidirectionalAnimations();
    
    // Set up parallax scrolling effect with improved performance
    setupEnhancedParallaxEffect();

    // 自动检测系统主题偏好
    function checkSystemTheme() {
      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark-mode');
      } else {
        document.body.classList.remove('dark-mode');
      }
    }
    
    // 初始化时检测一次
    checkSystemTheme();
    
    // 监听系统主题偏好变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
      if (document.body.classList.contains('auto-theme')) {
        if (e.matches) {
          document.body.classList.add('dark-mode');
        } else {
          document.body.classList.remove('dark-mode');
        }
      }
    });
    
    // 确保注册模态框验证码发送按钮事件绑定
    setTimeout(function() {
      console.log('确保验证码按钮事件绑定');
      
      // 检查发送验证码按钮是否存在
      if ($('#sendVerificationCode').length) {
        console.log('发送验证码按钮已找到，绑定点击事件');
        
        // 先解除所有现有的点击事件，防止重复绑定
        $('#sendVerificationCode').off('click');
        
        // 绑定新的点击事件
        $('#sendVerificationCode').on('click', function(e) {
          e.preventDefault();
          console.log('触发发送验证码函数');
          sendVerificationCode();
        });
      } else {
        console.log('未找到发送验证码按钮，将在模态框打开后再尝试绑定');
        
        // 如果按钮不存在，可能是模态框尚未初始化，监听模态框显示事件
        $(document).on('shown.bs.modal', '#registerModal', function() {
          console.log('注册模态框已显示，尝试绑定验证码按钮事件');
          
          if ($('#sendVerificationCode').length) {
            $('#sendVerificationCode').off('click').on('click', function(e) {
              e.preventDefault();
              console.log('触发发送验证码函数');
              sendVerificationCode();
            });
          }
        });
      }
    }, 1000); // 延迟1秒执行，确保DOM已完全加载
  });
  
  // Enhanced carousel initialization with synchronized animations
  function initializeCarousel() {
    // Initial animation for first slide
    setTimeout(function() {
      $('.carousel-item.active .parallax-bg').css('opacity', '1');
      $('.carousel-item.active .hero-caption-animate').addClass('visible');
    }, 300);
    
    // Handle slide transitions
    $('#carousel').on('slide.bs.carousel', function(e) {
      // Hide captions on all slides
      $('.carousel-item .hero-caption-animate').removeClass('visible');
      // Prepare next slide elements
      const nextSlide = $(e.relatedTarget);
      // Ensure images start with opacity 0
      nextSlide.find('.parallax-bg').css('opacity', '0');
    });
    
    // Animation after slide completes
    $('#carousel').on('slid.bs.carousel', function(e) {
      const activeSlide = $('.carousel-item.active');
      // Synchronize image and caption animations
      setTimeout(function() {
        activeSlide.find('.parallax-bg').css('opacity', '1');
        activeSlide.find('.hero-caption-animate').addClass('visible');
      }, 50);
    });
  }
  
  // Setup bidirectional animations that work when scrolling both up and down
  function setupBidirectionalAnimations() {
    const animatedElements = document.querySelectorAll('.animate-on-scroll');
    let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let scrollDirection = 'down';
    
    // Track scroll direction
    window.addEventListener('scroll', function() {
      const st = window.pageYOffset || document.documentElement.scrollTop;
      scrollDirection = st > lastScrollTop ? 'down' : 'up';
      lastScrollTop = st;
    });
    
    // Create an Intersection Observer for animation elements
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: [0.1, 0.5, 0.9] // Multiple thresholds for better accuracy
    };
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        // Get element's position relative to viewport
        const rect = entry.boundingClientRect;
        const windowHeight = window.innerHeight;
        
        // Calculate if element is entering from top or bottom
        const isEnteringFromBottom = rect.top > windowHeight;
        const isEnteringFromTop = rect.bottom < 0;
        
        if (entry.isIntersecting) {
          // Element is visible in viewport
          entry.target.classList.add('visible');
        } else {
          // Element is outside viewport
          // Only reset animation if the element fully exits the viewport
          if (isEnteringFromBottom || isEnteringFromTop) {
            entry.target.classList.remove('visible');
            
            // Reset any inline transition delays to allow for proper animation
            setTimeout(() => {
              const originalDelay = entry.target.className.match(/delay-(\d+)/);
              if (originalDelay) {
                entry.target.style.transitionDelay = (originalDelay[1] / 1000) + 's';
              } else {
                entry.target.style.transitionDelay = '0s';
              }
            }, 50);
          }
        }
      });
    }, observerOptions);
    
    // Start observing all animated elements
    animatedElements.forEach(element => {
      observer.observe(element);
    });
    
    // Initialize section reveal animations
    const revealSections = document.querySelectorAll('.section-reveal');
    const revealObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        } else {
          const rect = entry.boundingClientRect;
          const isCompletelyOutside = rect.bottom < 0 || rect.top > window.innerHeight;
          
          if (isCompletelyOutside) {
            entry.target.classList.remove('visible');
          }
        }
      });
    }, { threshold: 0.2 });
    
    revealSections.forEach(section => {
      revealObserver.observe(section);
    });
  }
  
  // Enhanced parallax effect with better performance
  function setupEnhancedParallaxEffect() {
    const parallaxBgs = document.querySelectorAll('.parallax-bg');
    
    // Use requestAnimationFrame for smoother parallax
    let ticking = false;
    let lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    
    function updateParallax() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      parallaxBgs.forEach(bg => {
        const rect = bg.getBoundingClientRect();
        if (rect.bottom >= -100 && rect.top <= window.innerHeight + 100) {
          const parentTop = bg.parentElement.getBoundingClientRect().top;
          const speed = 0.4;
          const yPos = (parentTop * speed);
          bg.style.transform = `translate3d(0, ${yPos / 6}px, 0)`;
        }
      });
      
      ticking = false;
      lastScrollPosition = scrollTop;
    }
    
    window.addEventListener('scroll', () => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          updateParallax();
          ticking = false;
        });
        ticking = true;
      }
    });
    
    // Initial update
    updateParallax();
  }
</script>
</body>
</html>